<template>
    <view class="index">
        <search></search>

        <view class="main">
            <swiper class="swiper" circular :indicator-dots="true"
                    :autoplay="true" :interval="swiperInterval"
                    indicator-active-color="#F4F4F4" indicator-color="rgba(244, 244, 244, 0.4)">
                <swiper-item v-for="e in swiperList" :key="e.id">
                    <image :src="e.imgUrl" mode="aspectFill"></image>
                </swiper-item>
            </swiper>

            <u-scroll-list class="category" indicatorActiveColor="#27BA9B">
                <view class="item" v-for="e in categoryList" :key="e.id">
                    <view class="wrap">
                        <image :src="e.icon"></image>
                        <view>{{ e.name }}</view>
                    </view>
                </view>
            </u-scroll-list>

            <view class="nav-4">
                <view class="item" v-for="e in nav4List" :key="e.id">
                    <view class="header">
                        <text>{{ e.title }}</text>
                        <text>{{ e.alt }}</text>
                    </view>
                    <view class="body">
                        <image :src="e.pictures[0]"></image>
                        <image :src="e.pictures[1]"></image>
                    </view>
                </view>
            </view>

            <home-card :data-list="newGoodsList" :title="'新鲜好物'"></home-card>

            <home-card :data-list="hotBrandList" :title="'热门品牌'"></home-card>

            <home-card :title="'专题'" :custom="true" class="subject">
                <view class="item" v-for="e in subjectList" :key="e.id" @click="goDetail">
                    <image :src="e.picture" mode="widthFix"></image>
                    <view class="desc">
                        <view class="title">{{ e.name }}</view>
                        <view class="price">{{ e.price }}</view>
                        <view class="info">
                            <text class="iconfont icon-fabulous"></text>
                            <text>{{ e.like }}</text>
                            <text class="iconfont icon-browse"></text>
                            <text>{{ e.view }}</text>
                        </view>
                    </view>
                </view>
            </home-card>

            <point-title></point-title>
            <goods-list :dataList="guessLikes" :loadStatus="loadStatus"></goods-list>
        </view>
    </view>
</template>

<script>
import { getCategoryList, getNav4, getSwiperList, getNewGoods, getGuessLikes } from '@/api/home'

export default {
    onLoad() {
        this.getSwiperList()
        this.getCategoryList()
        this.getNav4()
        this.getNewGoods()
        this.getGuessLikes()
    },
    onReachBottom() {
        this.getMore()
    },
    data() {
        return {
            swiperList: [],
            swiperInterval: 3000,
            categoryList: [],
            nav4List: [],
            newGoodsList: [],
            hotBrandList: [
                {
                    id: 1,
                    name: '小米',
                    picture: '/static/images/brand-mi.svg',
                    price: '99元起'
                },
                {
                    id: 2,
                    name: 'TCL',
                    picture: '/static/images/brand-tcl.svg',
                    price: '99元起'
                },
                {
                    id: 3,
                    name: '饭小宝',
                    picture: '/static/images/brand-fxb.svg',
                    price: '99元起'
                },
                {
                    id: 4,
                    name: 'Cartelo',
                    picture: '/static/images/brand-cartelo.svg',
                    price: '99元起'
                }
            ],
            subjectList: [
                {
                    id: 1,
                    name: '忙里忙外 回家吃饭',
                    picture: '/static/images/subject-1.svg',
                    price: '19.9元起',
                    like: 154,
                    view: 841
                },
                {
                    id: 2,
                    name: '忙里忙外 回家吃饭',
                    picture: '/static/images/subject-2.svg',
                    price: '24.9元起',
                    like: 242,
                    view: 1125
                }
            ],
            guessLikes: [],
            page: 1,
            pageSize: 10,
            loadStatus: 0
        }
    },

    methods: {
        async getSwiperList() {
            this.swiperList = (await getSwiperList(1)).result
        },
        async getCategoryList() {
            this.categoryList = (await getCategoryList()).result
        },
        async getNav4() {
            this.nav4List = (await getNav4()).result
        },
        async getNewGoods() {
            this.newGoodsList = (await getNewGoods()).result
        },
        async getGuessLikes() {
            const res = (await getGuessLikes({
                page: this.page,
                pageSize: this.pageSize
            })).result.items
            this.guessLikes = this.guessLikes.concat(res)
            if (res.length === 0) return true
        },
        getMore() {
            if (this.guessLikes.length > 0 && this.loadStatus === 0) {
                clearTimeout(this.timerId)
                this.timerId = setTimeout(async () => {
                    this.page++
                    this.loadStatus = 1
                    const status = await this.getGuessLikes()
                    if (status) {
                        this.loadStatus = 2
                    } else {
                        this.loadStatus = 0
                    }
                }, 500)
            }
        },
        goDetail() {
            uni.navigateTo({
                url: '/pages/detail/detail?id=3529022'
            })
        }
    }
}
</script>

<style lang="scss" scoped>
page {
    background-color: #F7F7F7;
}

.index {
    .main {
        padding: 20rpx;
        padding-top: 104rpx;

        .swiper {
            height: 280rpx;
            border-radius: 8rpx;
            overflow: hidden;
            margin-bottom: 30rpx;

            uni-image {
                width: 100%;
                height: 100%;
            }

            ::v-deep .uni-swiper-dot {
                width: 32rpx;
                height: 10rpx;
                border-radius: 5rpx;
            }
        }

        .category {
            color: #131313;

            .item {
                width: 20%;
                display: flex;
                justify-content: center;

                image {
                    width: 82rpx;
                    height: 82rpx;
                }

                view {
                    font-size: 26rpx;
                    text-align: center;
                }
            }

            .item:nth-child(-n + 5) {
                margin-bottom: 30rpx;
            }

            ::v-deep .u-scroll-list__scroll-view__content {
                flex-wrap: wrap;
            }
        }

        .nav-4 {
            display: flex;
            flex-wrap: wrap;
            background-color: white;
            margin-bottom: 20rpx;
            border-radius: 8rpx;

            .item {
                flex: 1;
                padding: 20rpx;

                .header {
                    display: flex;
                    align-items: center;
                    margin-bottom: 20rpx;

                    text:first-of-type {
                        font-size: 32rpx;
                        color: #262626;
                        margin-right: 20rpx;
                    }

                    text:last-of-type {
                        font-size: 24rpx;
                        color: #7F7F7F;
                    }
                }

                .body {
                    display: flex;
                    justify-content: space-between;

                    image {
                        width: 154rpx;
                        height: 154rpx;
                        border-radius: 6rpx;
                    }
                }
            }

            .item:nth-child(-n + 2) {
                border-bottom: 1rpx solid #F3F3F3;
            }

            .item:nth-child(2n) {
                border-left: 1rpx solid #F3F3F3;
            }
        }

        .subject {
            .item {
                width: 48%;

                image {
                    width: 100%;
                    margin-bottom: 8rpx;
                }

                .desc {
                    font-size: 24rpx;
                    color: #333333;

                    .price {
                        color: #CF4444;
                        font-size: 22rpx;
                        margin: 6rpx 0;
                    }

                    .info {
                        font-size: 20rpx;
                        display: flex;
                        align-items: center;

                        .iconfont {
                            font-size: 19rpx;
                            margin-right: 6rpx;
                        }

                        text:nth-child(2) {
                            margin-right: 12rpx;
                        }
                    }
                }
            }
        }
    }
}
</style>
